import React from 'react';
import {View, Text} from 'react-native';
import {ShadowedView, shadowStyle} from 'react-native-fast-shadow';
import {getDefaultHeaderHeight} from '@react-navigation/elements';
import {
  useSafeAreaFrame,
  useSafeAreaInsets,
} from 'react-native-safe-area-context';

export default ({children}) => {
  const frame = useSafeAreaFrame();
  const insets = useSafeAreaInsets();
  const defHeaderHeight = getDefaultHeaderHeight(frame, false, insets.top);
  const height = defHeaderHeight - insets.top;

  const svStyle = shadowStyle({
    opacity: 0.2,
    radius: 2,
    offset: [0, 2],
    color: '#666',
  });

  return (
    <ShadowedView style={svStyle}>
      <View
        style={{
          height: height,
          backgroundColor: '#FFF',
          flexDirection: 'row',
          alignItems: 'center',
        }}>
        {children}
      </View>
    </ShadowedView>
  );
};
